<!--
 * @Descripttion: 生态适宜指导
-->
<template>
  <div class="eco-suitable-wrapper">
    <!-- 地图 -->
    <div class="page-map">
      <map-view
        ref="mapview"
        @initMapView="initMapViewHandler"
        @mapClickHandler="onMapClickHandler"
      ></map-view>
    </div>
    <!-- 弹框 -->
    <SuitableModal
      :result="result"
      ref="suitableModal"
      @drawPolygonHandler="drawPolygonHandler"
      @upLoadShpFile="upLoadShpFileHandler"
      @analysisExecl="analysisExeclHandler"
      @locationHandler="locationHandler"
      type="3"
      planType="8"
      :view="view"
    />
  </div>
</template>
<script>
import LayerUtils from "@/utils/yc/LayerUtils";
import SymbolUtils from "@/utils/yc/SymbolUtils";
import {
  draw,
  getMapViewState,
  clearDrawGeometry,
  removeHighlight
} from "lark-map";
// 地图组件
import MapView from "@/components/yc/MapView";
// 弹框
import SuitableModal from "../components/SuitableModal";
import EcoSuitable from "@/components/yc/mapFunction/ecoSuitable";
import GeometryUtils from "@/utils/yc/GeometryUtils";

export default {
  name: "ecoSuitable",
  components: {
    MapView,
    SuitableModal
  },
  mixins: [EcoSuitable],
  data() {
    return {
      //地图对象
      view: null,
      drawGraphic: null, //绘制多边形
      result: null,
      onMapClickListen: null, //点击事件
      wktgeometries: null //几何图形
    };
  },
  created(){
    this.$emit("closeMenu")
  },
  methods: {
    /**
     * 初始化地图对象
     */
    initMapViewHandler(evt) {
      this.view = evt;
    },

    /**
     * 绘制完成处理函数
     */
    async drawPolygonHandler() {
      clearDrawGeometry({ view: this.view });
      removeHighlight(this.view);
      LayerUtils.clearRenderDrawLayer(this.view);
      this.drawGraphic = await draw({ type: "polygon", view: this.view });
      this.$refs.mapview.fullscreenLoading = true;
      let districtFeature = this.$refs.mapview.districtFeature;
      this.result = await this.queryDataByPolygon(this.view, districtFeature, [
        this.drawGraphic
      ]);
      //传值
      this.$refs.suitableModal.acceptGraphic(this.wktgeometries);
      this.$refs.mapview.fullscreenLoading = false;
      let owner = this;
      this.onMapClickListen = this.view.on("click", evt => {
        owner.onMapClickHandler(evt, [this.drawGraphic ]);
      });
    },
    /**
     * 地图点击处理函数
     * @param {*} event
     */
    async onMapClickHandler(event, graphics) {
      if (getMapViewState() === "occupied") return;
      clearDrawGeometry({ view: this.view });
      this.$refs.mapview.fullscreenLoading = true;
      let mapPoint = event.mapPoint;
      this.result = await this.queryDataBySuitable(
        this.view,
        graphics,
        mapPoint
      );
      this.$refs.mapview.fullscreenLoading = false;
    },
    /**
     * 上传shp文件成功
     */
    async upLoadShpFileHandler(result) {
      if (result == null) return null;
      let owner = this;
      this.$refs.mapview.fullscreenLoading = true;
      LayerUtils.clearRenderDrawLayer(this.view);
      let graphics = GeometryUtils.geoJsonToGraphic(
        result,
        this.view.spatialReference
      );
      if (graphics === undefined || graphics === null || graphics.length === 0)
        return null;
      let districtFeature = this.$refs.mapview.districtFeature;
      this.result = await this.queryDataByPolygon(
        this.view,
        districtFeature,
        graphics
      );
      //传值
      this.$refs.suitableModal.acceptGraphic(this.wktgeometries);
      this.$refs.mapview.fullscreenLoading = false;
      this.onMapClickListen = this.view.on("click", evt => {
        owner.onMapClickHandler(evt, graphics);
      });
    },

    // 解析Excel
    async analysisExeclHandler(points) {
      if (points === null || points.length === 0) return null;
      this.$refs.mapview.fullscreenLoading = true;
      LayerUtils.clearRenderDrawLayer(this.view);
      this.drawGraphic = GeometryUtils.toGraphic(
        points,
        this.view.spatialReference,
        SymbolUtils.DRAW_POLYGON_RENDER
      );
      let districtFeature = this.$refs.mapview.districtFeature;
      this.result = await this.queryDataByPolygon(this.view, districtFeature, [
        this.drawGraphic
      ]);
      //传值
      this.$refs.suitableModal.acceptGraphic(this.wktgeometries);
      this.$refs.mapview.fullscreenLoading = false;
      this.onMapClickListen = this.view.on("click", evt => {
        owner.onMapClickHandler(evt, [this.drawGraphic]);
      });
    },
    /**
     * 定位
     */
    async locationHandler(geometries) {
      let owner = this;
      this.$refs.mapview.fullscreenLoading = true;
      LayerUtils.clearRenderDrawLayer(this.view);
      if (geometries && geometries.length > 0) {
        let graphics = [];
        for (let i = 0; i < geometries.length; i++) {
          let item = geometries[i];
          let geometry = GeometryUtils.WktToPolygon(item.geometry);
          let graphic = {
            geometry: geometry,
          };
          graphics.push(graphic);
        }
        let districtFeature = this.$refs.mapview.districtFeature;
        this.result = await this.queryDataByPolygon(
          this.view,
          districtFeature,
          graphics
        );
        this.$refs.mapview.fullscreenLoading = false;
        this.onMapClickListen = this.view.on("click", evt => {
          owner.onMapClickHandler(evt, graphics);
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.eco-suitable-wrapper {
  position: relative;
  width: 100%;
  height: 100%;

  .page-map {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
}
</style>